<template>
  <div class="ps-el-image">
    <div class="el-image" v-if="refreshIng">
      <div class="el-image__placeholder"><i class="el-icon-loading"></i></div>
    </div>
    <el-image v-else :src="src"
      :alt="alt"
      :fit="fit"
      :referrerPolicy="referrerPolicy"
      :lazy="lazy"
      :scrollContainer="scrollContainer"
      :previewSrcList="previewSrcList"
      :zIndex="zIndex"
      @load="$emit('load')"
      @error="$emit('error')">
      <div slot="placeholder"
        class="el-image__placeholder">
        <i class="el-icon-loading"></i>
      </div>
      <div slot="error"
        class="el-image__error">
        <svg-icon iconClass="error" />
        <p>加载失败！<span @click.stop="refresh">手动刷新</span></p>
      </div>
    </el-image>
  </div>
</template>
<script>
export default {
  props: {
    src: String,
    alt: String,
    fit: String,
    referrerPolicy: String,
    lazy: Boolean,
    scrollContainer: [String, HTMLElement],
    previewSrcList: Array,
    zIndex: Number
  },
  data () {
    return {
      refreshIng: false
    }
  },
  methods: {
    refresh () {
      this.refreshIng = true
      setTimeout(() => {
        this.refreshIng = false
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.ps-el-image {
  display: flex;
  .el-image {
    flex: 1;
    &__placeholder {
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__error {
      background: transparent;
      color: #38383d;
      flex-direction: column;
      .svg-icon {
        font-size: 20px;
        margin-bottom: 10px;
      }
      > p {
        font-size: 12px;
        color: #333;
        span {
          color: #00BBD7;
          cursor: pointer;
          &:hover{
            color: #33c9df;
          }
        }
      }
    }
  }
}
</style>
